<template>
	<div class="big-container">
		<div class="b-top">
			<div class="container-content between-layout">
				<div class="start-layout">
					<div class="start-layout">
						<img style="width: 32px;height: 32px;" src="@/assets/image/link.png" />
						<div class="link-name">友情链接：</div>
					</div>
					<div class="start-layout">
						<div @click="toLink('http://www.people.com.cn/')" class="link-item">人民网</div>
						<div @click="toLink('https://www.jcrb.com/')" class="link-item">正义网</div>
						<div @click="toLink('https://www.spp.gov.cn/')" class="link-item">最高人民检察院</div>
						<div @click="toLink('http://www.ha.jcy.gov.cn/')" class="link-item">河南省人民检察院</div>
					</div>
				</div>
				<div class="end-layout hello">
					<el-select @change="toLink" :popper-append-to-body="false" class="select-style"
						popper-class="select-popper" v-model="value1" placeholder="请选择">
						<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
					<el-select @change="toLink" :popper-append-to-body="false" class="select-style"
						popper-class="select-popper" style="margin-left: 15px;" v-model="value2" placeholder="请选择">
						<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</div>
			</div>
		</div>
		<div class="b-bottom">
			<div style="width: 60%;margin: 0 20%;height: 170px;" class="between-layout">
				<div>
					<!-- <img style="width: 80px;height: 80px;" src="@/assets/image/red.png" /> -->
				</div>
				<div class="f-middle">
					<div style="margin-bottom: 10px;">Copyright(C)2014-2018 商丘市人民检察院</div>
					<div class="center-layout">
						<!-- <img style="width: 18px;height: 20px;margin-right: 6px;" src="@/assets/image/jh.png" /> -->
						豫ICP备11001282号
					</div>
				</div>
				<div>
					<!-- <img style="width: 36px;height: 57px;" src="@/assets/image/beian.png" /> -->
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		name: "Footer",
		data() {
			return {
				options1: [{
					value: 1,
					label: '基层检察机关'
				}, {
          value: 'http://lyq.sqjcy.gov.cn/index.html',
          label: '梁园区人民检察院'
        }, {
          value: 'http://ycs.sqjcy.gov.cn/index.html',
          label: '永城市人民检察院'
        }, {
          value: 'http://syq.sqjcy.gov.cn/index.html',
          label: '睢阳区人民检察院'
        }, {
          value: 'http://nlx.sqjcy.gov.cn/index.html',
          label: '宁陵县人民检察院'
        }, {
          value: 'http://zcx.sqjcy.gov.cn/index.html',
          label: '柘城县人民检察院'
        }, {
          value: 'http://ycx.sqjcy.gov.cn/index.html',
          label: '虞城县人民检察院'
        }, {
          value: 'http://xyx.sqjcy.gov.cn/index.html',
          label: '夏邑县人民检察院'
        }],
				options2: [{
					value: 1,
					label: '其他'
				}, {
					value: 'http://www.gov.cn/',
					label: '中央政府'
				}, {
					value: 'http://www.cppcc.gov.cn/',
					label: '全国政协'
				}, {
					value: 'http://www.court.gov.cn/',
					label: '最高人民法院'
				}, {
					value: 'http://www.mps.gov.cn/',
					label: '公安部'
				}, {
					value: 'http://www.people.com.cn/',
					label: '人民网'
				}, {
					value: 'http://www.xinhuanet.com/',
					label: '新华网'
				}, {
					value: 'http://www.cntv.cn/',
					label: '央视网'
				}, {
					value: 'https://www.chinalaw.org.cn/',
					label: '中国法学会'
				}, {
					value: 'http://www.legaldaily.com.cn/',
					label: '法治网'
				}],
				value1: 1,
				value2: 1
			};
		},
		methods: {
			toLink(url) {
				if (url != 1) {
					window.open(url, '_blank');
				}
			}
		}
	};
</script>
<style scoped lang="scss">
	.b-top {
		background-color: #3359A7;
		padding: 15px 0;

		.link-name {
			margin-left: 10px;
			font-size: 24px;
			color: #fff;
			font-weight: bold;
		}

		.link-item {
			font-size: 16px;
			color: #fff;
			padding: 0 20px;
			cursor: pointer;
		}
	}

	.hello {

		// 未选中任何选项的时候 placeholder的样式 需要先选中父元素 增加权重
		/deep/ input::-webkit-input-placeholder {
			color: #fff;
		}

		/deep/ input::-moz-input-placeholder {
			color: #fff;
		}

		/deep/ input::-ms-input-placeholder {
			color: #fff;
		}

		//修改的是el-input的样式
		//一种方法是设置最里层el-input__inner的背景色 外层的两级父元素设置为透明色
		//另一种方法是从el-select到el-input__inenr的背景色都设置为需要的颜色
		/deep/ .el-select,
		/deep/ .el-input,
		/deep/ .el-input__inner {
			background-color: transparent;
			color: #fff;
			width: 260px;
			height: 40px;
			line-height: 40px;
			font-size: 16px;
			border: 1px solid #5476B5;
			border-radius: 0px;
		}

		//el-input聚焦的时候 外层的border会有一个样式
		/deep/ .el-select .el-input.is-focus .el-input__inner {
			border: 1px solid #5476B5;
		}

		//修改的是el-input上下的小图标的颜色
		/deep/ .el-select .el-input .el-select__caret {
			color: #fff;
		}

		//修改总体选项的样式 最外层
		/deep/ .el-select-dropdown {
			background-color: #08164d;
			margin: 0px;
			border: 0px;
			border-radius: 0px;
		}

		//修改单个的选项的样式
		/deep/ .el-select-dropdown__item {
			background-color: transparent;
			color: #fff;
		}

		//item选项的hover样式
		/deep/ .el-select-dropdown__item.hover,
		/deep/ .el-select-dropdown__item:hover {
			color: #409eff;
		}

		//修改的是下拉框选项内容上方的尖角
		/deep/ .el-popper .popper__arrow,
		.el-popper .popper__arrow::after {
			display: none;
		}
	}

	.b-bottom {
		width: 100%;
		background-color: #3F69BD;
	}

	.f-middle {
		color: #C0BEBE;
		font-size: 14px;
	}
</style>
